<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01jQuery属性操作3练习</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 全选
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            });
            // 全不选
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            });
            // 反选
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;
                })
            });
            // 全选/全部选
            let flag = false;
            $("#checkedAllBox").click(function () {
                if (!flag) {
                    flag = true;
                    $(":checkbox").prop("checked", true);
                } else {
                    flag = false;
                    $(":checkbox").prop("checked", false);
                }
            });
        });
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<br>
    <input type="checkbox" id="checkedAllBox"/> 全选/全不选 <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球" checked/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/>
    <input type="button" id="checkedAllBtn" value="全 选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反 选"/>
</form>
</body>
</html>